<template>
  <div>
    <button @click="num++">{{ num }}</button>
  </div>
</template>

<script setup>
// defineProps定义 props的
import { defineExpose, ref, defineProps, defineEmits, watch } from 'vue'
// 创建props
const props = defineProps({
  value: { type: Number, default: 1 }
})
// 创建事件发送器
const emits = defineEmits(['update:value'])
// 使用props作为num的默认值
const num = ref(props.value)
// 监听 num 发送事件
watch(num, () => {
  // 发送事件
  emits('update:value', num.value)
})
// 监听porps更新value
watch(props, () => {
  // 更新num
  num.value = props.value
})
// 定义那些方法和属性可以被引用
// 组件外部可以允许哪些方法和属性可以被访问
function addNum(n) {
  num.value += n
}
defineExpose({ num, addNum })
</script>

<style lang="scss" scoped></style>
